<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 15:30:07
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 10:47:10
-->
<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      :title="moduleTitle"
      width="60%"
      placement="right"
    >
      <template #extra>
        <a-space wrap>
          <a-button
            type="primary"
            @click="handelAddSelect('新建选择项', {}, null)"
            >新建选择项</a-button
          >
          <a-button
            type="primary"
            @click="handelAddInput('新建输入框', {}, null)"
            >新建输入框</a-button
          >
          <a-button type="primary" danger @click="modalOpen = false"
            >关闭</a-button
          >
        </a-space>
      </template>
      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="paramsAdminColumns"
          :pagination="false"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'quality'">
              <a-tag v-if="record.types === '选择项'">{{
                record.quality == 1 ? "单选项" : "多选项"
              }}</a-tag>
              <a-tag v-if="record.types === '输入框'">{{
                record.quality == 1 ? "必填" : "非必填"
              }}</a-tag>
            </template>
            <template v-if="column.key === 'operate'">
              <a-space>
                <a-button type="primary" @click="handelEdit(record, index)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="您是否要删除此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleDel(record)"
                >
                  <a-button danger type="primary">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-drawer>
    <addSelect
      ref="selectRef"
      v-if="show"
      :titles="title"
      :list="list"
      :index="indexs"
      @refresh="refresh"
      @closeModal="closeModal"
    />
    <addInput
      ref="inputRef"
      v-if="showInput"
      :titles="titleInput"
      :list="listInput"
      :index="indexInput"
      @refresh="refresh"
      @closeModal="closeModal"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { paramsAdminColumns } from "../../columns.js";
import addSelect from "./addSelect.vue";
import addInput from "./addInput.vue";
import { catalogSave } from "@/api/goodConfig.js";
import { message } from "ant-design-vue";
const modalOpen = ref(false);
const moduleTitle = ref("参数管理");
const selectRef = ref(null);
const inputRef = ref(null);
const formData = ref(null);
const dataSource = ref([]);
const open = (record) => {
  formData.value = record;
  dataSource.value = formData.value.parameters
    ? JSON.parse(formData.value.parameters)
    : [];
  modalOpen.value = true;
};
const list = ref({});
const indexs = ref("");
const show = ref(false);
const title = ref("");
const handelAddSelect = (titles, record, index) => {
  title.value = titles;
  list.value = record;
  indexs.value = index;
  show.value = true;
  // selectRef.value.open(titles, record, index);
};
const listInput = ref({});
const indexInput = ref("");
const showInput = ref(false);
const titleInput = ref("");
const handelAddInput = (titles, record, index) => {
  listInput.value = record;
  indexInput.value = index;
  showInput.value = true;
  titleInput.value = titles;
  // inputRef.value.open(titles, record, index);
};
function closeModal() {
  show.value = false;
  showInput.value = false;
}
const handelEdit = (record, index) => {
  if (record.types === "选择项") {
    console.log(record);
    title.value = '修改选项框';
    list.value = record;
    indexs.value = index;
    show.value = true;
    // selectRef.value.open("修改选项框", record, index);
  } else {
    listInput.value = record;
    indexInput.value = index;
    showInput.value = true;
    titleInput.value = '修改输入框';
    // inputRef.value.open("修改输入框", record, index);
  }
};
const emits = defineEmits(["refreshList"]);
function handleCatalogSave() {
  catalogSave(formData.value).then((result) => {
    if (result.code === 200) {
      message.success("成功");
      emits("refreshList");
    }
  });
}
function handleDel(record) {
  const filerData = dataSource.value.filter(
    (val) => val.title !== record.title
  );
  dataSource.value = filerData;
  formData.value.parameters = JSON.stringify(dataSource.value);
  handleCatalogSave();
}
function refresh(datas, changeIndex) {
  if (changeIndex === null) {
    dataSource.value.push(datas);
  } else {
    dataSource.value = dataSource.value.map((item, index) => {
      if (index === changeIndex) {
        item = datas;
      }
      return item;
    });
  }
  formData.value.parameters = JSON.stringify(dataSource.value);
  handleCatalogSave();
}
defineExpose({ open });
</script>
